<template>
    <div class="h-full flex flex-col">
        <el-form :inline="true" :model="searchform">
            <div class="flex justify-between mb-1">
                <el-form-item>
                    <el-button size="default" type="primary" :icon="Plus" @click="openDialog('add')">新增</el-button>
                    <el-button :icon="Refresh" @click="getList">刷新</el-button>
                </el-form-item>

                <el-space>
                    <el-form-item label="赛制：">
                        <el-select v-model="searchform.pointsRuleId" placeholder="请选择" style="width:200px">
                            <el-option v-for="item in pointsRuleSList" :key="item.id" :label="item.label" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="getAllMatchRecordList" :icon="Search">查询</el-button>
                        <el-button @click="getAllMatchRecordList" :icon="Refresh">重置</el-button>
                    </el-form-item>
                </el-space>
            </div>
        </el-form>
        <div class="table-section grid mb-2" style="height:calc(100% - 40px - 50px)">
            <el-table border :data="tableData.list" style="height:100%">
                <el-table-column prop="id" label="id" width="80px" align="center"/>
                <el-table-column prop="time" label="比赛时间" align="center"/>
                <el-table-column prop="location" label="比赛地点" align="center"/>
                <el-table-column prop="userInfo" label="红方用户" align="center">
                    <template #default="scope">
                        <el-tag type="danger">{{ scope.row.userInfo.nickname }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="opponentInfo" label="蓝方用户" align="center">
                    <template #default="scope">
                        <el-tag type="primary">{{ scope.row?.opponentInfo?.nickname || '未知' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="ruleId" label="赛制" align="center">
                    <template #default="scope">
                        <span type="warning">{{ scope.row.ruleInfo?.label }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="scoreResult" label="比分" align="center">
                    <template #default="scope">
                        <el-tag type="danger">{{ scope.row.scoreResult.a }}</el-tag>
                        :
                        <el-tag type="primary">{{ scope.row.scoreResult.b }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间"/>
                <el-table-column prop="action" label="操作" fixed="right" width="200px">
                    <template #default="scope">
                        <!--                        <el-button type="primary" plain @click="openDialog('update',scope.row)" size="small">编辑</el-button>-->
                        <el-tooltip content="查看" placement="top">
                            <el-button type="primary" :icon="View" circle plain @click="openDialog('details',scope.row)" size="small"/>
                        </el-tooltip>

                        <el-tooltip content="删除" placement="top" v-if="scope.row.status==0">
                            <el-button type="danger" :icon="Delete" circle plain size="small"/>
                        </el-tooltip>

                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-pagination
            :total="tableData.total"
            v-model:current-page="tableData.page"
            v-model:page-size="tableData.size"
            :page-sizes="[10, 50, 100, 200]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        />
    </div>
    <dialog-add-edit ref="dialogRef" @update="getAllMatchRecordList"></dialog-add-edit>
    <dialog-match-record-details ref="dialogMatchRecordDetailsRef"></dialog-match-record-details>
</template>
<script setup>
import { reactive, ref, useTemplateRef } from 'vue'
import { Delete, Plus, Refresh, Search, View } from '@element-plus/icons-vue'
import DialogAddEdit from './dialog-add-edit.vue'
import pointsRuleSApi from '@/api/model/points-rule-s.js'
import matchRecordApi from '@/api/model/match-record.js'
import dialogMatchRecordDetails from '../platform-match-record/dialog-details.vue'

const dialogMatchRecordDetailsRef = useTemplateRef('dialogMatchRecordDetailsRef')

const searchform = reactive({
    name: '',
})

/**
 * 打开编辑弹窗
 * @param type
 * @param item
 */
const dialogEditRef = useTemplateRef('dialogRef')
const openDialog = (type, item) => {
    if (type === 'add' || type === 'update') {
        dialogEditRef.value.openDialog(type, item)
    } else if (type === 'details') {
        dialogMatchRecordDetailsRef.value.openDialog(type, item)
    }
}

/**
 * 获取所有比赛记录接口
 */
const tableData = reactive({
    list: [],
    total: 0,
    page: 1,
    size: 10,
})
const getAllMatchRecordList = async () => {
    const { code, data } = await matchRecordApi.getAllMatchRecordList.get({
        page: tableData.page,
        size: tableData.size
    })
    if (code === 200) {
        tableData.list = data.list
        tableData.total = data.total

    } else {
        tableData.list = []
        tableData.total = 0
    }
}
getAllMatchRecordList()

/**
 * 分页的每页数量改变
 * @param data
 */
function handleSizeChange (data) {
    tableData.size = data
    tableData.page = 1
    getAllMatchRecordList()
}

/**
 * 分页的页码改变
 * @param data
 */
function handlePageChange (data) {
    tableData.page = data
    getAllMatchRecordList()
}

/**
 *  获取赛制列表
 */
const pointsRuleSList = ref([])
const getPointsRuleSList = async () => {
    const { code, data } = await pointsRuleSApi.list.get()
    if (code === 200) {
        pointsRuleSList.value = data
    } else {
        pointsRuleSList.value = []
    }
}
getPointsRuleSList()
</script>


<style lang="less">

</style>